<template>
  <el-drawer
    title="选择辅导员"
    :visible.sync="drawer"
    :direction="'btt'"
    class="selectUserContent"
    :size="650"
    :before-close="handleClose"
  >
    <el-row style="margin: 0;" :gutter="20">
      <!--部门数据-->
      <el-col :span="4" class="treeBox" :xs="24">
        <TreeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'部门信息'"></TreeIndex>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-tabs v-model="activeName">
          <el-tab-pane label="班级列表" name="allList">
            <el-table
              :data="allTableData"
              ref="multipleTable"
              @select="rowSelect"
              @select-all="selectAll"
              style="width: 100%"
              height="440"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                v-for="item in tableColumn"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :show-overflow-tooltip="true"
                :align="'center'"
              >
                <!-- <template v-if="item.prop=='sex'" slot-scope="scope">
                                    <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
                                </template>
                                <template v-if="item.prop=='studentType'" slot-scope="scope">
                                    <dict-tag :options="dict.type.bc_student_type" :value="scope.row.studentType"></dict-tag>
                </template>-->
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane label="已选择" name="haveList">
            <span slot="label">
              <el-badge
                :value="haveTableData.length"
                class="badgeItem"
                :hidden="!haveTableData.length"
                :type="'primary'"
              >已选择</el-badge>
            </span>
            <el-table :data="haveTableData" style="width: 100%" height="440">
              <el-table-column
                v-for="item in tableColumn"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :show-overflow-tooltip="true"
                :align="'center'"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
import TreeIndex from "@/components/tree/index.vue";
import { deptTreeSelect } from "@/api/system/user";
import { ubdClass } from "@/api/information/classInfor";
import { studentList } from "@/api/information/studentInfor";
export default {
  name: "selectUser",
  components: {
    TreeIndex
  },
  props:{
    sendUserIds: {
      type: Array,
      default: []
    },
  },
  watch:{
    sendUserIds: {
            handler (newVal, oldVal) { // newVal是获取的是新的值
              console.log("new", newVal)
                this.haveTableData = newVal
            },
        }
    },
  data() {
    return {
      drawer: false,
      deptOptions: [],
      activeName: "allList",
      studentColumn: [
        {
          prop: "deptNames",
          label: "所属院系"
        },
        {
          prop: "specialtyName",
          label: "专业"
        },
        {
          prop: "gradeName",
          label: "入学年级"
        },
        {
          prop: "classCode",
          label: "班号"
        },
        {
          prop: "name",
          label: "班级名称"
        },
        {
          prop: "classSize",
          label: "班级人数"
        }
      ],
      tableColumn: [],
      allTableData: [],
      haveTableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: "",
      },
      total: 0
    };
  },
  created() {
    this.department();

  },
  // mounted() {
  //   this.haveTableData = this.sendUserIds 
  //   console.log(this.sendUserIds, 'sendUserIds')
  // },
  methods: {
    open() {
      this.drawer = true;
      this.tableColumn = this.studentColumn;

      this.getList();
    },
    // formatter(row) {
    //     return row.sex === "0" ? '男': '女'
    // },
    initData() {
      this.activeName = "allList";
      this.tableColumn = [];
      this.allTableData = [];
      this.haveTableData = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: ""
      };
      this.total = 0;
    },
    handleClose(done) {
      const userIds = this.haveTableData.map((item) => {return item})
      this.$emit("update:sendUserIds", userIds);
      done();
    },
    rowSelect(selection, row) {
      console.log(selection, row, "123");

      // this.haveTableData = selection
        if (selection.length) {
                if (!this.haveTableData.some((item) => {return item.id == row.id})) {
                    this.haveTableData.push(row)
                } else {
                this.haveTableData = this.haveTableData.filter((item) => {
                    return row.id != item.id
                })
            }
                
            } else {
                this.haveTableData = this.haveTableData.filter((item) => {
                    return row.id != item.id
                })
            }
  
    },
    selectAll(selection) {
      console.log(selection, "1");

      if (selection.length) {
        selection.forEach((data) => {
          this.haveTableData.push(data);
        });
        const uniqueArray = this.haveTableData.filter((item, index, self) => {
          return self.findIndex((t) => t.id === item.id) === index;
        });
        this.haveTableData = uniqueArray
        // selection.forEach(row => {
        //   this.rowSelect([row], row);
        // });
      } else {
        this.haveTableData = this.haveTableData.filter(item => {
          return !this.allTableData.some(row => {
            return row.id == item.id;
          });
        });
      }
    },
    // 获取班级列表
    getTeacherList() {
      ubdClass(this.queryParams).then(response => {
        this.allTableData = response.rows;
        this.total = response.total;
        // this.toggleSelection(response.rows);
      });
    },
    getStudentList() {
      studentList(this.queryParams).then(response => {
        this.allTableData = response.rows;
        this.total = response.total;
        this.toggleSelection(response.rows);
      });
    },
    getList() {
      this.getTeacherList();
    },
    // toggleSelection(rows) {
    //   this.$nextTick(() => {
    //     if (rows) {
    //       rows.forEach(row => {
    //         if (
    //           this.haveTableData.some(haveRow => {
    //             return row.userId == haveRow.userId;
    //           })
    //         ) {
    //           this.$refs.multipleTable.toggleRowSelection(row);
    //         }
    //       });
    //     } else {
    //       this.$refs.multipleTable.clearSelection();
    //     }
    //   });
    // },
    // 获取部门信息
    department() {
      deptTreeSelect().then(res => {
        this.deptOptions = res.data;
      });
    },
    // tree树形选中的值
    handleNodeClick(data) {
      console.log(data, "选中的值");
      this.queryParams.deptId = data.id;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.treeBox {
  height: 550px;
}
.selectUserContent {
  ::v-deep .el-drawer__header {
    margin-bottom: 5px;
  }
  ::v-deep .el-badge__content.is-fixed {
    position: absolute;
    top: 15px;
    right: 3px;
  }
}
::v-deep .pagination-container {
  height: 33px;
}
</style>